{extend name="base" /}
{block name="css"}
<link rel="stylesheet" media="screen" href="{__CSS__}/css/login.css?v={:rand_number()}"/>
{/block}
{block name="body"}          
    <div class="login-wrapper">
    <form id="mobile-form" class="layui-form" method="POST" action="" onsubmit="return false;">
        <input type="hidden" name="uid" value="1" id="uid">
       <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-cellphone"></i> 
            <input class="layui-input" name="oldMobile" id="oldMobile" placeholder="输入原手机号" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
        </div>

       <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-cellphone"></i> 
            <input class="layui-input" name="mobile" id="mobile" placeholder="输入新手机号" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
        </div>

                <div class="layui-form-item layui-input-icon-group login-captcha-group">
            <i class="layui-icon layui-icon-auz"></i>
            <input class="layui-input" id="code" name="code" placeholder="{:__('Please enter the verification code')}" autocomplete="off" />
            <botton style="background-color:rgba(0,0,0,0.2)" id="mobiles"lay-filter="retrievemima" lay-submit class="login-captcha" />{:__('Click send')}</botton>
        </div>
        <div class="layui-form-item layui-input-icon-group layui-select-none">
           <input type="submit" class="layui-btn layui-btn-sm" lay-filter="retrieve" lay-submit value="{:__('Submit for verification')}">
             <button class="layui-btn layui-btn-sm layui-btn-danger close">关闭</button>
        </div>
        
    </form>
</div> 
<style>
.notClick{
height:40px; pointer-events: none
 } 
</style>
</body>
{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'jquery'], function(){
        var layer = layui.layer,
            form  = layui.form,
            $     = layui.jquery;
// 通用关闭
$('.close').on('click', function () {
    
     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
     parent.layer.close(index); //再执行关闭   

});
form.on('submit(retrievemima)', function (data) {
                //清空input
                $("input[name='code']").val("").focus();
                $("input[name='password']").val("").focus();
   var index = layer.msg('<i>{:__('Sending, please wait')}</i>', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 1
    });
    $.ajax({
         url: "{:url('user/mobile')}",
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 0) {
            $('input[name="code"]').val(result.captcha);
                setTimeout(function () {
                     if(isNaN(parseInt($("#mobiles").html()))){
                        var origText  = '60';
                        var interval = setInterval(function(){
                            var time = --origText;
                            if(time <= 0) {
                                clearInterval(interval);
                                $('#mobiles').html('{:__('Resend')}').css('border','none').css('color','#000').css('background-color','rgba(0,0,0,0.2)').removeClass("notClick");
                            }else{
                                $('#mobiles').html(time+'&nbsp;&nbsp;{:__('second')}').css('background-color','rgba(0,0,0,0.2)').css('color','#ff2222').addClass('notClick');
                            
                        }
                        }, 1000);
                   // parent.location.reload();
                   }
                }, 1000);

            layer.close(index);
            layer.msg(result.msg, {icon: 1});
            }else{
                
            layer.close(index);
            layer.msg(result.msg, {icon: 2});
            }
        },
    });
    return false;
});
form.on('submit(retrieve)', function (data) {
    var index = layer.msg('<i>{:__('Verification in progress, please wait')}</i>', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 4
    });

    $.ajax({
        url: "{:url('user/changemobile')}",
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 0) {
                setTimeout(function () {
                        //location.href = result.url;
                    parent.location.reload();
                }, 1000);
           
            layer.close(index);
            layer.msg(result.msg, {icon: 1});
            }else{
                
            layer.close(index);
            layer.msg(result.msg, {icon: 2});
            }
        },
    });
    return false;
});
});

</script>
{/block}